<template>
	<view>
		<view class="search">
			<image style="width: 34rpx;height: 34rpx;margin: 23rpx 0 0 30rpx;" src="../../static/users/search.png"
				mode=""></image>
			<input class="ipt_h" @input="searchval" placeholder="请输入搜索内容" type="text" value="" />
		</view>

		<view class="search_suo" @click="search">
			搜索
		</view>

		<view v-if="result">
			<view class="shai_xuan">
				<view class="text1">
					价格
					<image class="image_lou" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
				</view>

				<view class="xian">

				</view>

				<view class="text2">
					销量
					<image class="image_xiao" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
				</view>
			</view>

			<view class="detailback" v-for="(item,index) in menupoup">
				<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
				<view class="titles">
					灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
				</view>

				<view class="have">
					已售100
				</view>

				<view class="price">
					<text>¥</text>
					366
				</view>

				<view class="guige" v-if="index%2==0">
					选规格
				</view>

				<view class="bujin" v-if="index%2!=0">
					<image class="image_bu_jian" @click="reduce(index)" src="../../static/users/jian.png"
						mode="aspectFill"></image>
					<view class="num">
						{{item.num}}
					</view>
					<image class="image_bu_jia" @click="add(index)" src="../../static/users/jia.png" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>
		
		<view v-if="empt">
			<u-empty class="empt" text="暂无内容" mode="search"></u-empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: false,
				menupoup: [{
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}],
				empt:false
			}
		},
		methods: {
			searchval(e) {
				console.log(e.detail.value);
				if (e.detail.value) {
					this.result = false
				}
				this.value = e.detail.value
			},
			search() {
				// if (this.value != "") {
				// 	this.result = true
				// }else 
				if(this.value=="11"){
						this.result = true
						this.empt=false
				}else if(this.value="222"){
					this.result = false
					this.empt=true
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
		position: absolute;
	}

	.search {
		margin: 40rpx 0 30rpx 30rpx;
		width: 610rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.ipt_h {
			width: 500rpx;
			position: absolute;
			top: 0;
			left: 90rpx;
			height: 80rpx;
		}

	}

	.search_suo {
		position: absolute;
		top: 62rpx;
		right: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #181818;
	}


	.shai_xuan {
		margin: 20rpx 0 20rpx 30rpx;
		width: 690rpx;
		height: 68rpx;
		background: #F6F7F9;
		border-radius: 34rpx;
		position: relative;
	}

	.text1 {
		margin-left: 53rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.text2 {
		position: absolute;
		left: 224rpx;
		top: -68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.image_lou {
		position: absolute;
		top: 32rpx;
		left: 82rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.image_xiao {
		position: absolute;
		top: 32rpx;
		left: 62rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.xian {
		position: absolute;
		top: 19rpx;
		left: 184rpx;
		width: 1rpx;
		height: 30rpx;
		background: #FFFFFF;
	}

	.detailback {
		height: 190rpx;
		width: 750rpx;
		position: relative;
	}

	.img_detail {
		margin: 20rpx 0 0 30rpx;
		width: 180rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.titles {
		position: absolute;
		top: 17rpx;
		left: 232rpx;
		width: 477rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.have {
		position: absolute;
		left: 232rpx;
		top: 63rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.price {
		position: absolute;
		top: 102rpx;
		left: 232rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4646;

		text {
			font-size: 20rpx;
		}
	}

	.guige {
		position: absolute;
		right: 30rpx;
		top: 107rpx;
		width: 89rpx;
		height: 36rpx;
		background: #F48F5B;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;

		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bujin {
		position: absolute;
		left: 600rpx;
		top: 107rpx;
		width: 200rpx;
		height: 36rpx;

	}

	.image_bu_jian {
		width: 36rpx;
		height: 36rpx;
	}

	.image_bu_jia {
		margin-left: 48rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.num {
		position: absolute;
		left: 36rpx;
		top: 0;
		width: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}
	.empt{
		margin-top: 200rpx;
	}
</style>
